<layout name="page" />
<block name="content">
	<input type="hidden" name="sourse" id="sourse" value="actor">
	<div class="fc-toolbar">
		<div class="fc-left">
			<a onclick="prev();" class="btn"><i class="fa fa-chevron-left"></i></a>
			<a onclick="next();" class="btn"><i class="fa fa-chevron-right"></i></a>
			<a onclick="today();" class="btn">今天</a>
			<eq name="auth.admin" value="true">
				<a onclick="room();" class="btn">会议室管理</a>
			</eq>
		</div>
		<div class="fc-right">
			<a onclick="month_view();" class="btn">月视图</a>
			<a onclick="all_meeting();" class="btn">所有</a>
			<a onclick="my_meeting();" class="btn">我参与的</a>
			<a onclick="created_meeting();" class="btn">我发起的</a>
			<eq name="auth.write" value="true">
				<a onclick="add()" class="btn">新建</a>
			</eq>
		</div>
		<div class="fc-center">
			<h2 id="panel"></h2>
		</div><div class="fc-clear"></div>
	</div>
	<div class="row">
		<div class="col-sm-4">
			<div id="calendar" class="day_view"></div>
		</div>
		<div class="col-sm-8">
			<ul id="ul_list" class="list-group clear-list m-t" style="height:auto;"></ul>
		</div>
	</div>
	<div id="sample" style="display: none;">
		<li class="list-group-item ">
			<div class="pull-left">
				<span class="label label-primary seq"></span>
				<span class="title" style="padding-left:8px;cursor: pointer"></span>
			</div>
			<span class="pull-right time" style="padding-right:8px;"></span>			
		</li>
	</div>
</block>
<block name="js">
	<script>
		function next() {
			$('#calendar').fullCalendar('next');
		}

		function prev() {
			$('#calendar').fullCalendar('prev');
		}

		function today() {
			$('#calendar').fullCalendar('today');
		}

		function add() {
			window.open("{:url('add')}", "_self");
		}

		function month_view() {
			window.open('{:url("index")}', "_self");
		}

		function day_view() {
			window.open("{:url('day_view')}", "_self");
		}

		function created_meeting() {
			$('#sourse')[0].value = 'created';
			$('#calendar').fullCalendar('refetchEvents');
		}

		function room() {
			window.open("{:url('roomindex')}", "_self");
		}

		function all_meeting() {
			$('#sourse')[0].value = 'all';
			$('#calendar').fullCalendar('refetchEvents');
		}

		function my_meeting() {
			$('#sourse')[0].value = 'actor';
			$('#calendar').fullCalendar('refetchEvents');
		}

		function all_meeting() {
			$('#sourse')[0].value = 'all';
			$('#calendar').fullCalendar('refetchEvents');
		}

		$(document).on("click", "#ul_list .title", function() {
			$id = $(this).attr('id');
			winopen('{:url("read")}?id=' + $id, 560, 470);
		});

		$(document).ready(function() {
			set_return_url(null);
			$('#calendar').fullCalendar({
				header : false,
				titleFormat : {
					month : 'YYYY年MMMM', // September 2009
					week : "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // Sep 7 - 13 2009
					day : 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009
				},
				aspectRatio : 1,
				firstDay : 1,
				buttonText : {
					prevYear : '去年',
					nextYear : '明年',
					today : '今天',
					month : '月',
					week : '周',
					day : '日'
				},
				timeFormat : 'H:mm',
				dayNamesShort : ['日', '一', '二', '三', '四', '五', '六'],
				monthNames : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				eventDrop : function(event, delta, revertFunc) {
					alert(event.title + " was dropped on " + event.start.format());
					if (!confirm("Are you sure about this change?")) {
						revertFunc();
					}
				},
				eventAfterAllRender : function(view) {
					$('#panel').html(view.title);
				},
				eventClick : function(event, jsEvent, view) {
					winopen('{:url("read")}?id=' + event.id, 560, 470);
				},
				events : function(start, end, timezone, callback) {
					$.ajax({
						url : '{:url("json")}',
						dataType : 'json',
						data : {
							// our hypothetical feed requires UNIX timestamps
							start_date : start.format('YYYY-MM-DD'),
							end_date : end.format('YYYY-MM-DD'),
							sourse : $('#sourse')[0].value,
						},
						success : function(doc) {
							$("#ul_list").empty();
							var events = [];
							var $i = 0;
							for (var s in doc) {
								$i++;
								$("#test").append(doc[s].start_time + ":" + doc[s].name);

								$html = $("#sample").clone();
								if ($i == 1) {
									$("li", $html).addClass('fist-item');
								}
								$('.title', $html).text('[' + doc[s].meeting_room + '] ' + doc[s].name);
								$('.title', $html).attr('id', doc[s].id);
								$('.seq', $html).text($i);
								$('.time', $html).text(doc[s].start_time.substr(5, 11) + ' - ' + doc[s].end_time.substr(5, 11));

								$("#ul_list").append($html.html());

								events.push({
									id : doc[s].id,
									room : doc[s].meeting_room,
									title : doc[s].name,
									start : doc[s].start_time, // will be parsed
									end : doc[s].end_time // will be parsed
								});
							}
							callback(events);
						}
					});
				}
			});

		});

	</script>
</block>
